<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="使用人">
          <el-input
            v-model="formInline.name"
            placeholder="请输入使用人账号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="手机号">
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" class="movement">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="时间">
          <el-date-picker v-model="formInline.value" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增账户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          :index="indexMethod"
          type="index"
          label="序号"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="use_user"
          align="center"
          label="使用人"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="use_phone" align="center" label="手机号">
        </el-table-column>
        <!-- <el-table-column prop="user_name" align="center" label="账号">
        </el-table-column> -->
        <el-table-column prop="role_name" align="center" label="角色">
        </el-table-column>
        <!-- <el-table-column prop="status" align="center" label="是否显示">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              active-text="是"
              inactive-text="否"
              @change="ifLook(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="sanChu(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 100, 200, 300]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :title="titleText"
    >
      <el-form
        :model="formLabelAlign"
        label-width="125px"
        ref="form"
        :rules="rules"
      >
        <div class="oneLine">
          <el-form-item label="使用人" prop="use_user">
            <el-input
              v-model="formLabelAlign.use_user"
              placeholder="请输入使用人"
            ></el-input>
          </el-form-item>
        </div>
        <div class="oneLine">
          <el-form-item label="手机号" prop="use_phone">
            <el-input
              v-model="formLabelAlign.use_phone"
              placeholder="手机号"
            ></el-input>
          </el-form-item>
        </div>

        <!-- <div class="oneLine">
          <el-form-item label="账号" prop="user_name">
            <el-input
              v-model="formLabelAlign.user_name"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
        </div> -->
        <div class="oneLine">
          <el-form-item label="密码">
            <el-input
              v-model="formLabelAlign.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item label="角色" prop="role_id">
            <el-select
              v-model="formLabelAlign.role_id"
              multiple
              filterable
              placeholder="请选择"
              @change="asdasd"
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="btnBox">
        <el-button
          type="primary"
          dialogVisible
          class="confirm"
          @click="submitData()"
          >返 回</el-button
        >
        <el-button type="primary" dialogVisible class="confirm" @click="save"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { accountNumberList, getAllUserList } from "../../../utils/api";
import {
  addAccountNum,
  editAccountNum,
  delAccountNum,
  getAllRoleList,
} from "../../../utils/main";
export default {
  data() {
    return {
      roleList: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
      formLabelAlign: {
        name: "",
        sort: "",
        avatar: "",
      },
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      formInline: {
        status: "",
        name: "",
        mobile: "",
      },
      tableData: [],
      parameter: {
        common: "",
      },
      id: "",
      total: 0,
      limit: 10,
      page: 1,
      name: "",
      status: "",
      currentPage: 1,
      type: 2,
      titleText: "",
      parent_id: "0",
      status: "",
      value: "",
      rules: {
        use_user: [
          { required: true, message: "请输入使用人", trigger: "blur" },
        ],
        use_phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        // user_name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        role_id: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },
  methods: {
    asdasd(e) {
      // console.log(e, 111);
      // console.log(this.formLabelAlign);
      this.formLabelAlign.role_id = e;
      // 这个方法是强制刷新
      this.$forceUpdate();
      // console.log(this.formLabelAlign.role_id);
    },
    ifLook(row) {
      // console.log(row.status);
      editKXXM(
        this.token,
        row.parent_id,
        row.name,
        row.sort,
        row.image,
        row.type,
        row.status,
        row.id
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    // 返回
    submitData() {
      this.dialogVisible = false;
    },
    //查询
    onSubmit() {
      // this.opinionsS();
      this.name = this.formInline.name;
      this.status = this.formInline.status;
      this.getList();
    },
    handleReset() {
      this.name = "";
      this.status = "";
      this.formInline.name = "";
      this.formInline.status = "";
      this.formInline.mobile = "";
      this.getList();
    },

    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      // this.opinionsS();
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      // this.opinionsS();
      this.getList();
    },
    // 新增
    handleAdd() {
      this.formLabelAlign = {};
      this.dialogVisible = true;
      this.titleText = "新增";
    },
    // 编辑
    handleEdit(row) {
      let obj = {};
      obj = JSON.parse(JSON.stringify(row));
      obj.password = "";
      this.formLabelAlign = obj;
      // this.formLabelAlign = row;
      // console.log(this.formLabelAlign);
      // console.log(this.id);
      // user_name  账号
      // use_user  使用人
      // use_phone  手机号
      // password  密码
      // role_id  角色id

      // console.log(this.formLabelAlign, 11111);
      // user: [{ required: true, message: "请输入使用人", trigger: "blur" }],
      // Contact: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      // Account: [{ required: true, message: "请输入账号", trigger: "blur" }],
      // password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      // role: [{ required: true, message: "请选择角色", trigger: "blur" }],
      // this.formLabelAlign.user = this.formLabelAlign.use_user;
      // this.formLabelAlign.Contact = this.formLabelAlign.phone;
      // this.formLabelAlign.Account = this.formLabelAlign.user_name;
      // this.formLabelAlign.Account = this.formLabelAlign.user_name;
      // this.formLabelAlign.password = "";
      if (row.role) {
        // let list = JSON.parse(JSON.stringify(row.role.split(",")));
        console.log(row.role);
        let list = row.role.split(",");
        console.log(list, 111);
        for (let i = 0; i < list.length; i++) {
          list[i] = Number(list[i]);
        }
        console.log(list, 222);
        this.formLabelAlign.role_id = list;
        // console.log(this.formLabelAlign.role_id);
      }
      this.dialogVisible = true;
      this.titleText = "编辑";
    },
    //确定添加
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // console.log(this.formLabelAlign, "8888880");
          if (this.formLabelAlign.id != null) {
            // console.log(this.formLabelAlign, "000");
            // 编辑
            editAccountNum(
              this.token,
              5,
              this.formLabelAlign.id,
              this.formLabelAlign.user_name,
              this.formLabelAlign.use_user,
              this.formLabelAlign.use_phone,
              this.formLabelAlign.password,
              this.formLabelAlign.role_id
            ).then((res) => {
              if (res.data.status) {
                this.$message({
                  message: "修改成功",
                });
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            // console.log(this.formLabelAlign, "111");

            // 新增
            addAccountNum(
              this.token,
              5,
              this.formLabelAlign.user_name,
              this.formLabelAlign.use_user,
              this.formLabelAlign.use_phone,
              this.formLabelAlign.password,
              this.formLabelAlign.role_id
            ).then((res) => {
              if (res.data.status) {
                this.$message({
                  message: "新增成功",
                });
                this.total = res.data.data.count;
                this.formLabelAlign = {};
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 删除
    sanChu(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(row.id);
          delAccountNum(this.token, row.id).then((res) => {
            if (res.data.status) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getSelect() {
      // this.loading = true;
      // if (this.seller_id == null) {
      //   this.seller_id = "";
      // }
      let res = await getAllRoleList(this.token, "", "", 9, 1, 20)
        .then((res) => {
          // console.log(this.type, 88888);
          if (res.data.status) {
            this.roleList = res.data.data.data;
            // console.log(this.options1);
            // this.total = res.data.data.count;
            // console.log(111, this.options);
            // let timer = setTimeout(() => {
            //   this.loading = false;
            //   clearTimeout(timer);
            // }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            // let timer = setTimeout(() => {
            //   this.$message.error(res.data.msg);
            // }, 5000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    // 新增
    handleRemove() {},
    // 获取列表
    async getList() {
      this.loading = true;
      let res = await accountNumberList(
        this.token,
        this.page,
        this.limit,
        this.formInline.name,
        this.formInline.mobile,
        this.formInline.status,
        5
      );
      if (res.data.status) {
        this.tableData = res.data.data.data || [];
        this.total = res.data.data.count;
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
  },
  mounted() {
    this.getList();
    // getAllUserList(this.token, 7).then((res) => {
    //   console.log(res);
    //   if (res.data.status) {
    //     this.roleList = res.data.data;
    //   }
    // });
    this.getSelect();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}
.oneLine {
  display: flex;
  justify-content: space-between;
}
.addP {
  font-size: 22px;
  text-align: center;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.btnBox {
  display: flex;
  justify-content: center;
}
</style>